<!-- HTML部分 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户首页</title>
    <!-- 引入jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>

<!-- 用户信息和收藏按钮 -->
<div id="user-info">
    <p>欢迎，用户名！</p>
    <button id="favorite-btn">收藏</button>
</div>

<script>
    // JavaScript部分
    $(document).ready(function() {
        // 给收藏按钮绑定点击事件
        $('#favorite-btn').on('click', function() {
            addToFavorites();
        });
    });

    function addToFavorites() {
        // 获取用户ID或其他必要的信息
        var userId = '123';

        // 构造发送给后端的数据
        var requestData = {
            userId: userId,
            // 其他需要的参数
        };

        // 发送Ajax请求给后端
        $.ajax({
            type: 'POST',
            url: '/api/add-to-favorites',  // 后端处理收藏请求的API URL
            data: JSON.stringify(requestData),
            contentType: 'application/json',
            success: function(response) {
                // 收藏成功后的操作，比如更新前端UI
                alert('已成功收藏！');
            },
            error: function(error) {
                // 处理错误
                console.error('收藏失败：', error);
            }
        });
    }
</script>

</body>
</html>
